<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <title>Document</title>
</head>
<style>
    body {
        background-color: #cccccc;
        font-size: 14px;
    }

    div {
        width: 300px;
        height: 300px;
        position: absolute;
        transform: translate(-50%, -50%);
        top: 50%;
        left: 50%;
    }

    button {
        width: 250px;
        height: 30px;
        border-radius: 15px;
        border: none;
        cursor: pointer;
    }
    button:hover{
        background-color: darkgray;
    }
</style>

<body>
    <div id="main">
        <form action="" v-on:submit='depsd' onsubmit="return false">
            <pre>手 机 号：<input type="text" id="phone" placeholder="请输入11位手机号" name="phone" v-on:blur='blur'></pre>
            <br>
            <pre>密    码：<input type="password" name="psw" id="psw" placeholder="请输入密码(6位数以上)"></pre>
            <br>
            <pre>验证密码：<input type="password" name="definepsd" id="definepsd" placeholder="再次确认您的密码"></pre>
            <br>
            <button type="submit" >注册</button>
        </form>
    </div>
</body>
<script>
    let vm = new Vue({
        el: '#main',
        methods: {
            blur: function () {
                let phone = document.getElementById('phone');
                this.phone = phone
                let reg = /^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])\d{8}$/;
                if (phone.value.match(reg)) {
                } else {
                    alert('手机号输入错误')
                }
            },
            depsd: function () {
                let psd = document.getElementById('psw').value;
                let definepsd = document.getElementById('definepsd').value;
                console.log(psd.value);
                if (psd.length < 6 && definepsd.length < 6) {
                    alert('您的密码不符合要求')
                } else if (psd == definepsd) {
                    alert('注册成功，欢迎用户' + this.phone.value)
                } else {
                    alert('两次密码不一致')
                }
            }
        },
    })
</script>

</html>